<template>
    <el-header v-if="!navTabs.state.tabFullScreen" class="layout-header">
        <component :is="config.layout.layoutMode + 'NavBar'"></component>
    </el-header>
    <div class="nav-bar" style="height: 40px">
        <NavTabs v-if="!config.layout.shrink"/>
    </div>
</template>
<script setup lang="ts">
import {useConfig} from '/@/stores/config'
import {useNavTabs} from '/@/stores/navTabs'
import DefaultNavBar from '/@/layouts/components/navBar/default.vue'
import ClassicNavBar from '/@/layouts/components/navBar/classic.vue'
import StreamlineNavBar from '/@/layouts/components/menus/menuHorizontal.vue'
import DoubleNavBar from '/@/layouts/components/navBar/double.vue'
import NavTabs from "/@/layouts/components/navBar/tabs.vue";
import NavMenus from "/@/layouts/components/navMenus.vue";

defineOptions({
    name: 'layout/header',
    components: {DefaultNavBar, ClassicNavBar, StreamlineNavBar, DoubleNavBar},
})

const config = useConfig()
const navTabs = useNavTabs()
</script>

<style scoped lang="scss">
.nav-bar {
    border-top: 1px solid #d6d6d6;
    border-left: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6;
    display: flex;
    height: 50px;
    width: 100%;
    background-color: v-bind('config.getColorVal("headerBarBackground")');

    :deep(.nav-tabs) {
        display: flex;
        height: 100%;
        position: relative;

        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            z-index: 1;
            height: 100%;
            user-select: none;
            color: v-bind('config.getColorVal("headerBarTabColor")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;

            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }

            .close-icon:hover {
                background: var(--ba-color-primary-light);
                color: var(--el-border-color) !important;
                border-radius: 50%;
            }

            &.active {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
            }

            &:hover {
                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
            }
        }

        .nav-tabs-active-box {
            position: absolute;
            height: 50px;
            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }

    :deep(.nav-tabs2) {
        display: flex;
        height: 100%;
        width: 50px;
        position: relative;

        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            z-index: 1;
            height: 100%;
            user-select: none;
            color: v-bind('config.getColorVal("headerBarTabColor")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;

            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }

            .close-icon:hover {
                background: var(--ba-color-primary-light);
                color: var(--el-border-color) !important;
                border-radius: 50%;
            }

            &.active {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
            }

            &:hover {
                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
            }
        }

        .nav-tabs-active-box {
            position: absolute;
            height: 50px;
            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }
}

.layout-header {
    height: auto;
    padding: 0;
}
</style>
